<template>
  <div class="userInfoBox">
    <!-- eslint-disable-next-line no-trailing-spaces -->
    <!-- <HeadNav :title="'选择填报'" ref="headNavRef"></HeadNav> -->
    <div class="content">
      <div class="contentTop" ref="contentTopRef">
        <div class="contentTop-left">
          <img src="../../assets/images/dangkou.png" alt="" style="width: 34px; height: 34px;">
        </div>
        <div class="contentTop-right">
          <div class="contentTop-right-top">{{ pageTopInfo }}</div>
          <div class="contentTop-right-bottom">{{ currentDate }} 提交清单</div>
        </div>
      </div>
      <div class="contentBottom" :style="contentBottom_height">
        <van-sidebar :active-key="activeKey" @change="onChangeSidebar">
          <van-sidebar-item v-for="(item) in supplierList" :key="item.id" :title="item.supplierName" />
        </van-sidebar>
        <div class="sidebar_content">
          <div class="goods-box" v-for="(item, index) in goodsList" :key="index" :id="index">
            <!-- <div class="goods-title">{{ item.materialName }}({{ `${item.specification}/${item.unit}` }})</div> -->
            <!-- <div
              class="goods-title"
              v-if="item.unit!==null && item.unit!==undefined && item.specification!==null && item.specification!==undefined" >{{ item.materialName }}({{ `${item.specification}/${item.unit}` }})</div>
            <div
              class="goods-title"
              v-else-if="(item.unit===null || item.unit===undefined )&& (item.specification!==null && item.specification!==undefined)">{{ item.materialName }}({{ `${item.specification}` }})</div>
            <div
              class="goods-title"
              v-else-if="(item.unit!==null && item.unit!==undefined ) && (item.specification===null || item.specification===undefined)">{{ item.materialName }}({{ `${item.unit}` }})</div>
            <div
              class="goods-title"
              v-else-if="(item.unit===null || item.unit===undefined ) && (item.specification===null || item.specification===undefined)">{{ item.materialName }}</div> -->
            <div class="goods-title" v-if="item.unit && item.specification">{{ item.materialName }}({{
              `${item.specification}/${item.unit}` }})</div>
            <div class="goods-title" v-else-if="!item.unit && item.specification">{{ item.materialName }}({{
              `${item.specification}` }})</div>
            <div class="goods-title" v-else-if="item.unit && !item.specification">{{ item.materialName }}({{
              `${item.unit}` }})</div>
            <div class="goods-title" v-else-if="!item.unit && !item.specification">{{ item.materialName }}</div>

            <div class="goods-box-bottom">
              <div class="goods-price">￥{{ item.unitPrice }}</div>
              <div class="goods-num">
                <van-button icon="minus" type="info" class="minus" @click.stop="jian(index, item.id)"></van-button>
                <div class="selectnum" @click="showInputNum(item, index)">{{ item.selectNum ? item.selectNum : 0 }}
                </div>
                <van-button icon="plus" type="primary" class="plus" @click.stop="add(index, item.id)"></van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showInput" round @click-overlay="closePopup" style="width: 80%;height: 180px;"
      :closeable="true">
      <div class="pop_title">
        请输入数量
      </div>
      <van-field v-model="popUpNum" :border="true" type="digit" clearable
        style="width: 80%;height: 34px;margin: 14px auto 16px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 10px;" />
      <div class="sub_btn" @click="confirmFilter">
        确认
      </div>
    </van-popup>
    <van-popup v-model="showSubmitBox" :closeable="true" round style="width: 80%;padding-bottom: 24px;">
      <div class="top_title">你确认提交当前所选清单吗？</div>
      <div class="sub_btn"  :class="{ disabled: isSubmitting }" @click="!isSubmitting && submit2()">
        确定
      </div>
    </van-popup>
    <van-popup v-model="showList" :closeable="true" position="bottom" style="width: 100%;height: auto">
      <div class="popupList" :style="pb">
        <div class="popupWrapper">
          <div class="top_title3">已添加清单</div>
          <!-- 清单具体内容 -->
          <div class="popup-goods-box" v-if="choosedList.length > 0" :style="pb">
            <!-- 清单主体内容 -->
            <div class="goods-box goods-box-top " v-for="(item, index) in choosedList" :key="index" :id="index">
              <!-- <div class="goods-title">{{ item.materialName }}({{ `${item.specification}/${item.unit}` }})</div> -->

              <div class="goods-title" v-if="item.unit && item.specification">{{ item.materialName }}({{
                `${item.specification}/${item.unit}` }})</div>
              <div class="goods-title" v-else-if="!item.unit && item.specification">{{ item.materialName }}({{
                `${item.specification}` }})</div>
              <div class="goods-title" v-else-if="item.unit && !item.specification">{{ item.materialName }}({{
                `${item.unit}` }})</div>
              <div class="goods-title" v-else-if="!item.unit && !item.specification">{{ item.materialName }}</div>

              <div class="goods-box-bottom">
                <div class="goods-price">￥{{ item.unitPrice }}</div>
                <div class="goods-num">
                  <van-button icon="minus" type="info" class="minus" @click.stop="jian1(item)"></van-button>
                  <div class="selectnum" @click="showInputNum(item, index)">{{ item.selectNum }}</div>
                  <van-button icon="plus" type="primary" class="plus" @click.stop="add1(item)"></van-button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="popup-goods-box_empty">暂无数据</div>
        </div>
        <!-- 清淡页面的底部按钮区域 -->
        <div class="submitBar submitBar_popup" style="position: fixed">
          <div class="submitBar_left">
            <van-button @click="toRecordList"><img src="../../assets/images/cart.png" alt=""
                style="width: 25px; height: 25px;">
              <div class="cartInfo" v-show="choosedList.length">{{ choosedList.length }}</div>
            </van-button>
            <div class="allPrice"> ￥{{ totalPrice.toFixed(2) }}</div>
          </div>
          <van-button type="primary" class="loginBtn" @click="onSubmit()">去提交 </van-button>
        </div>
      </div>
    </van-popup>

    <!-- <div class="submitBar">
        <van-button
          icon="cart-o"
          info="5"
          @click="toRecordList"></van-button>
        <div class="allPrice"> ￥795.00 <span style="margin-left: 10px; margin-right: 10px;">| </span> <span
          class="checked"
          @click="toRecordList">点击查看清单</span></div>
        <van-button
          type="primary"
          class="loginBtn"
          @click="onSubmit()">去提交 </van-button>
      </div> -->
    <div class="submitBar submitBar_width" ref="submitBar">
      <div class="submitBar_left">
        <van-button @click="toRecordList"><img src="../../assets/images/cart.png" alt=""
            style="width: 25px; height: 25px;">
          <div class="cartInfo" v-show="choosedList.length">{{ choosedList.length }}</div>
        </van-button>
        <div class="allPrice"> ￥{{ totalPrice.toFixed(2) }} <span style="margin-left: 10px; margin-right: 10px;">|
          </span> <span class="checked" @click="toRecordList">点击查看清单</span></div>
      </div>
      <van-button type="primary" class="loginBtn" @click="onSubmit()">去提交 </van-button>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { listByStallId, materialListBySupplierId, getStallApi, addStallReportApi, stallTodayReportApi } from '@/api/stall'
import HeadNav from '@/components/HeadNav'
import { Toast } from 'vant';
import { mapState } from 'vuex'
export default {
  name: 'SelectFillIn',
  components: {
    HeadNav,
  },
  computed: {
    ...mapState({
      chooseLists: (state) => state.chooseData.chooseList
    }),
    displayTitle() {
      const { materialName, specification, unit } = this.item;
      let title = materialName;
      if (specification && unit) {
        title += `(${specification}/${unit})`;
      } else if (specification) {
        title += `(${specification})`;
      } else if (unit) {
        title += `(${unit})`;
      }
      return title;
    }
  },

  watch: {
    // active(newVal) {
    //   console.log('newVal', newVal)
    //   if (newVal === 0) {
    //     this.params.applyType = null
    //     this.loading = true
    //     this.contentData = []
    //     this.finished = false
    //     if (!this.finished) {
    //       this.onLoad(1)
    //     }
    //   } else {
    //     this.params.applyType = newVal
    //     this.loading = true
    //     this.contentData = []
    //     this.finished = false
    //     if (!this.finished) {
    //       this.onLoad(1)
    //     }
    //   }
    // }
  },
  data() {
    return {
      active: 0,
      supplierList: [
        // { id: 1, supplierName: '这是一个很长很长很长很长很长的供应商名称' },
        // { id: 2, supplierName: '另一个较长的供应商名称' }
      ],
      sidebarList: [
        {
          cateName: '主食',
          goodsList: [

            {
              id: '101',
              title: '新东大鸡排  (件/20公斤)',
              price: '170.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '鱼丸\虾丸（件/10公斤）',
              price: '115.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '牛肉（斤）',
              price: '45',
              selectNum: 0,
            },
            {
              id: '101',
              title: '烤肠（件/12公斤）',
              price: '156.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '大鸡排（10袋）',
              price: '165.00',
              selectNum: 0,
            }
          ],
        },
        {
          cateName: '蔬菜水果',
          goodsList: [

            {
              id: '101',
              title: '新东大鸡排  (件/20公斤)',
              price: '170.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '鱼丸\虾丸（件/10公斤）',
              price: '115.00',
              selectNum: 0,
            }
          ],
        },
        {
          cateName: '肉类',
          goodsList: [
            {
              id: '101',
              title: '新东大鸡排  (件/20公斤)',
              price: '170.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '牛肉（斤）',
              price: '45',
              selectNum: 0,
            }
          ],
        },
        {
          cateName: '调味品',
          goodsList: [
            {
              id: '101',
              title: '酸汤料  (件/10袋)',
              price: '280.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '椒麻料（件/18袋）',
              price: '200.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '咖喱粉（件/6袋）',
              price: '850',
              selectNum: 0,
            }
          ],
        },
        {
          cateName: '零食饮料',
          goodsList: [
            {
              id: '101',
              title: '可口可乐 (件/1箱)',
              price: '50.00',
              selectNum: 0,
            }
          ],
        },
        { cateName: '其他' },
      ],

      activeKey: 0,
      goodsList: [],
      goodsNum: undefined,
      showInput: false,
      showSubmitBox: false,
      showList: false,
      popUpNum: '',
      curItem: {}, // 当前弹窗输入数据的商品
      curIndex: -1,
      submitBarHeight: 46,
      bottomHeight: 'padding-bottom: 46px;',
      currentDate: '',
      pageTopInfo: '运中食堂档口',
      supplierId: '',
      goodsNum: '',
      choosedList: [],
      totalPrice: 0,
      contentBottom_height: '',
      pb: '',
      isReset: false,
      detailList: [],
      sidebar_content_Height: undefined,
      isSubmitting:false,

    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (to.query.item !== undefined) {
        vm.localData = JSON.parse(to.query.item)
        console.log(vm.isReset, 'ppppppppppuiuuuuu')
        vm.isReset = vm.localData.isReset
      } else {
        vm.isSubmit = false
      }

    })
  },
  watch: {
    choosedList: {
      handler(val, val1) {
        let price = 0
        val.forEach(item => {
          price += item.unitPrice * item.selectNum
        })
        this.totalPrice = price
      },
      deep: true
    }
  },
  mounted() {
    this._listByStallId()
    console.log(this.isReset, 'z重置', this.goodsList)
    // this.assignDataWhenReset()
    // this._stallTodayReportApi()  //获取今日已填报数据

    const submitBarHeight = this.$refs.submitBar.offsetHeight;
    console.log('底部菜单栏高度：', submitBarHeight);
    this.bottomHeight = `padding-bottom: ${Number(submitBarHeight)}px;`
    console.log(this.bottomHeight, 'bottomHeight')

    this.sidebar_content_Height = `height:calc(100% - ${Number(submitBarHeight)}px)`
    // 页面
    // this.$nextTick(() => {
    //   const HeadNav=this.$refs.headNavRef.$el.offsetHeight
    //   console.log(this.$refs.headNavRef,'dingbu菜单栏高度111aaa：', HeadNav)
    // })

    // const headNav = this.$refs.headNavRef.$el;
    // const rect = headNav.getBoundingClientRect();
    // const headNavHeight = rect.height;
    // console.log('HeadNav组件的高度：',this.$refs.headNavRef.$el, headNavHeight)

    const topWrapperHeight = this.$refs.contentTopRef.offsetHeight;
    console.log('底部菜单栏高度：', topWrapperHeight, 'topWrapperHeight')

    // headNav使用时
    // this.contentBottom_height = `height:calc( 100vh - ${Number(submitBarHeight + topWrapperHeight + 50)}px )`
    this.contentBottom_height = `height:calc( 100vh - ${Number(submitBarHeight + topWrapperHeight)}px )`

    console.log(this.contentBottom_height, '9999')
    this.pb = `padding-bottom: ${Number(submitBarHeight)}px;`
    //document.title = `${this.currentDate}待入库`
    document.title = `选择填报`
  },
  created() {
    const accessToken = localStorage.getItem('access_token')
    if (!accessToken) {
      this.$router.push('/login')
    }
    // this.sidebarList.forEach((item, index) => {
    //   console.log(item, index, 'ooooo')
    //   if (this.activeKey == index) {
    //     this.goodsList = item.goodsList
    //   }
    // })
    // 当天日期
    const timestamp = new Date().getTime();
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    this.currentDate = `${year}-${month}-${day}`;
    console.log(this.currentDate, 'this.currentDate');
    this._getStallApi()


  },
  methods: {

    onClose() {

    },
    toCheck() {
      this.$router.push({ path: '/selectFillIn' })
    },
    onChangeSidebar(e) {
      this.activeKey = e
      const current = this.supplierList[e]
      console.log(this.choosedList, '已选数据')
      this._materialListBySupplierId(current.id)

    },
    // 查看清单
    toRecordList() {
      this.showList = true
    },
    // 去tijiao
    onSubmit() {
      this.showSubmitBox = true
    },


    submit2() {
      if (this.isSubmitting) return;
      this.isSubmitting = true;

      this.choosedList.forEach(item => {
        item.amount = Number(item.unitPrice) * Number(item.selectNum)
      })
      // 深拷贝  不影响原数据
      const choosedL = JSON.parse(JSON.stringify(this.choosedList));
      choosedL.forEach(item => {
        item.inAmount = 0
        item.inNum = 0
        item.price = item.unitPrice
        item.materialId = item.id
        item.num = item.selectNum

        delete item.unitPrice
        delete item.id
        delete item.remark
        delete item.specification
        delete item.status
        delete item.unit
        delete item.materialName
        delete item.selectNum
      })


      console.log(choosedL, 'list------')

      const proObj = {}
      proObj.totalPrice = this.totalPrice
      proObj.proList = this.choosedList
      this.$store.commit('chooseData/setOneChooseList', proObj)
      // console.log(this.$store.state.chooseData.chooseData,'list')
      addStallReportApi(choosedL).then(res => {
        if (res.code === 200) {
          this.showList=false
          this.showSubmitBox = false
          Toast('提交成功')
          const item = {}
          item.isSubmit = true
          item.proList = this.choosedList
          item.totalPrice = this.totalPrice
          this.$router.push({
            path: '/index'
          })
        } else {
          Toast('请重新提交')
        }
      }).finally(() => {
        this.isSubmitting = false;  // 无论成功失败都重置状态
        Toast.clear();
      })
    },

    //数字+
    add(index, id) {
      // if (this.activeKey == val) {
      this.goodsList.forEach((ele, ss) => {
        if (index === ss) {
          ele.selectNum++

          if (ele.selectNum > 0) {
            let hasPro = false
            this.choosedList.forEach(item => {
              if (item.id === ele.id) {
                hasPro = true
                item.selectNum = ele.selectNum
              }
            })
            if (!hasPro) {
              this.choosedList.push(ele)
            }
          }
        }
      })
      // }

      console.log(this.choosedList, '++++')
    },

    //数字减
    jian(index, ID) {
      this.goodsList.forEach((ele, ss) => {
        if (index === ss) {
          if (ele.selectNum >= 1) {
            ele.selectNum--
            if (ele.selectNum > 0) {
              this.choosedList.forEach(item => {
                if (item.id === ID) {
                  item.selectNum = ele.selectNum
                }
              })
            } else {
              this.choosedList = this.choosedList.filter(item => {
                return item.id !== ID
              })
            }
          } else {
            Toast('该宝贝数量不能在减少了哟！')
          }
        }
      })
      console.log(this.choosedList)
    },

    // 弹窗数字+
    add1(row) {
      row.selectNum++
      // console.log(this.choosedList, '++++')
      this.goodsList.forEach(item => {
        if (row.id === item.id) {
          item.selectNum = row.selectNum
        }
      })
    },
    // 弹窗数字减
    jian1(row) {
      if (row.selectNum > 1) {
        row.selectNum--
      } else {
        this.choosedList = this.choosedList.filter(item => {
          if (row.id === item.id) {
            item.selectNum = 0
          }
          return item.id !== row.id
        })
      }
      this.goodsList.forEach(item => {
        if (row.id === item.id) {
          item.selectNum = row.selectNum
        }
      })
    },
    // 输入数字
    showInputNum(item, index) {
      this.curItem = item
      this.curIndex = index
      this.popUpNum = item.selectNum
      this.showInput = true
    },

    // 确认按钮
    confirmFilter() {
      // console.log('确认', this.goodsList[this.curIndex])
      this.goodsList[this.curIndex].selectNum = this.popUpNum
      this.showInput = false

      console.log(111, this.popUpNum)
      let hasPro = false
      this.choosedList.forEach(single => {
        if (single.id === this.curItem.id) {
          hasPro = true
        }
      })

      if (this.popUpNum > 0) {
        if (hasPro) {
          this.choosedList.filter(item => {
            return item.id === this.curItem.id
          })[0].selectNum = this.popUpNum
        } else {
          this.choosedList.push(this.curItem)
        }
      } else {
        if (hasPro) {
          this.choosedList = this.choosedList.filter(item => {
            return item.id !== this.curItem.id
          })
        }
      }
    },
    // 关闭弹窗
    closePopup() {
      this.showInput = false
    },
    /**
     * 接口
     */

    //  页面左侧档口的slider 
    async _listByStallId() {
      listByStallId().then(async res => {
        if (res.code === 200) {
          this.supplierList = res.data
          this.supplierList.forEach((item, index) => {
            if (this.activeKey === index) {
              this.supplierId = item.id
            }
          })
          // await this._stallTodayReportApi()
          // console.log(this.choosedList,'09909090')
          // this._materialListBySupplierId(this.supplierId)
          this.assignDataWhenReset()
        }
      })
    },

    // 页面右侧的内容
    async _materialListBySupplierId(supplierId) {
      materialListBySupplierId(supplierId).then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            let hasChoose = false
            let num = 0
            this.choosedList.forEach(single => {
              if (single.id === item.id) {
                hasChoose = true
                num = single.selectNum
              }
            })
            if (hasChoose) {
              this.$set(item, 'selectNum', num)
            } else {
              this.$set(item, 'selectNum', 0)
            }
          })
          this.goodsList = res.data
        }
      })
    },

    // 页面顶部的信息档口
    _getStallApi() {
      getStallApi().then(res => {
        console.log(res, 'lll')
        if (res.code === 200) {
          this.pageTopInfo = res.data.floor + res.data.stallName
        }
      })
    },

    // 处理今天已填报  重新填报  已填报信息的显示
    async assignDataWhenReset() {
      await Promise.all([
        this._stallTodayReportApi(),
        this._materialListBySupplierId(this.supplierId)
      ])
      console.log(this.choosedList, this.goodsList, '000')
      // 更新 goodsList 中的 selectNum
      // this.goodsList.forEach(goodsItem => {
      //   const found = this.detailList.find(detailItem => detailItem.materialId === goodsItem.id);
      //   if (found) {
      //     goodsItem.selectNum = found.selectNum;
      //   }
      // })
      console.log('Updated goodsList:', this.goodsList);
    },
    // 已填报明细
    // 今日明细
    async _stallTodayReportApi() {
      stallTodayReportApi().then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.detailList = res.data.reportChildList
            console.log(this.detailList, 'detailList')
            this.detailList.forEach(item => {
              item.num=parseInt(item.num)
              item.selectNum = item.num
              item.unitPrice = item.price
              delete item.id
              item.id = item.materialId
            })
            // 将detailList赋值给choosedList
            this.choosedList = [...this.detailList];

            // // 更新 goodsList 中的 selectNum
            this.goodsList.forEach(goodsItem => {
              const found = this.detailList.find(detailItem => detailItem.materialId === goodsItem.id);
              if (found) {
                goodsItem.selectNum = found.selectNum;
              }
            })
          }
        }
      })

    }


  },
  beforeDestroy() {
    console.log('index')
    window.removeEventListener('scroll', this.onLoad, true)
  },
}
</script>

<style lang="less" scoped>
/* eslint-disable */
span,
p {
  padding: 0;
  margin: 0;
}

.userInfoBox {
  overflow: hidden;
  height: 100vh;
}

.content {
  overflow: hidden;
  height: calc(100vh - 50px);
  padding-bottom: 50px;
  background-color: #f9f9f9;
}

.contentTop {
  background-color: white;
  padding: 25px 24px;
  // margin-top: 42px;  //headNav使用   不注释
  display: flex;
  align-items: center;

  .contentTop-left {
    width: 54px;
    height: 54px;
    border-radius: 54px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contentTop-right {
    // display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 16px;
  }

  .contentTop-right-top {
    font-size: 18px;
    text-align: left;
    color: #000000;
    line-height: 18px;
  }

  .contentTop-right-bottom {
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    color: #000000;
    margin-top: 12px;
    height: 100%;
  }
}

.contentBottom {
  background-color: #f9f9f9;
  display: flex;

  .sidebar_content {
    width: calc(100% - 116px);
    padding-top: 5px;
    height: 100%;
    overflow: auto;
  }
}

// 右侧 内容  
.goods-box {
  background-color: #ffffff;
  padding: 12px 24px;
  margin-bottom: 5px;

  .goods-title {
    font-size: 16px;
    // line-height: 16px;
    text-align: left;
    color: #000000;
  }

  .goods-box-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;

    .goods-price {
      font-size: 15px;
      line-height: 15px;
      text-align: left;
      color: #999999;
    }

    .goods-num {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .selectnum {
        font-size: 15px;
        text-align: center;
        color: #999999;
        margin: 0px 6px;
      }
    }

    .plus {
      width: 15px;
      height: 15px;
      background: #047DCB;
      // border: none;
      border: 1px solid #047DCB;
    }

    /deep/ .plus .van-button--normal {
      color: #ffffff !important;
      padding: 10px;
      width: 15px;
      height: 15px;
    }

    .minus {
      width: 13px;
      height: 13px;
      border: 1px solid #047DCB;
      background: transparent;
      color: #047DCB;
    }

    /deep/.minus .van-button--normal {
      color: #047DCB !important;
      padding: 10px !important;
      width: 13px;
      height: 13px;
    }

    /deep/.van-button--info {
      padding: 10px !important;
    }

    /deep/.van-button--primary {
      padding: 10px !important;
    }
  }
}

.goods-box-top {
  border-top: 1px solid #e5e5e5
}


/*清浮动*/
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.clearfix {
  zoom: 1;
}

// 去逛逛
.loginBtn {
  width: 100%;
  height: 45px;
  border: none;
  background: #047DCB;
  border-radius: 45px;
}

.tips {
  margin-top: 25px;
  font-size: 14px;
  text-align: right;
  color: #000000;
  line-height: 14px;
}

// sidebar
::v-deep .van-sidebar {
  width: 116px !important;
  height: calc(100h - 60px);
  background-color: #f9f9f9;
}

// 未选中的样式
::v-deep .van-sidebar-item {
  // font-weight: bold;
  font-size: 26rpx;
  line-height: 26rpx;
  text-align: center;
  color: #888888;
  border: none !important;
}

// 选中的样式
::v-deep .van-sidebar-item--selected {
  // font-weight: bolder;
  line-height: 32rpx;
  font-size: 32rpx;
  text-align: center;
  color: #111111;
}

::v-deep .van-sidebar-item--select::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.10667rem;
  height: 0.42667rem;
  background-color: transparent;
  transform: translateY(-50%);
  content: '';
}

::v-deep .van-sidebar-item__text {
  // 换行
  white-space: normal;
  word-wrap: break-word;

  // 省略号
  // white-space: nowrap;
  // /* 防止文本换行 */
  // overflow: hidden;
  // /* 超出部分隐藏 */
  // text-overflow: ellipsis;
  // /* 显示省略号 */
  // max-width: 100%;
}

.submitBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  position: fixed !important;
  bottom: 0px;
  z-index: 2;
  // width: 100%;
  // width: calc(100% - 48px);
  // margin-left: 24px;
  // margin-right: 24px;

  .allPrice {
    font-size: 15px;
    text-align: left;
    color: #000000;
    line-height: 15px;
    padding-left: 5px;
  }

  .checked {
    font-size: 12px;
    line-height: 12px;
    text-align: left;
    color: #999999;
  }

  .loginBtn {
    width: 88px;
    height: 30px;
    border: none;
    background: #047DCB;
    border-radius: 45px;
  }
}

// 非弹出窗底部按钮区域宽度
.submitBar_width {
  width: calc(100% - 48px);
  padding-left: 24px;
  padding-right: 24px;
  background: #f9f9f9;
}

// 弹出窗 底部按钮区域  
.submitBar_popup {
  padding-left: 24px;
  padding-right: 24px;
  width: calc(100% - 48px);
  position: fixed;
  background: #f9f9f9;
}

.pop_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #000;
  font-size: 15px;
  text-align: center;
  margin-top: 21px;
}

.sub_btn {
  width: 80%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 22px;
  color: #fff;
  background: #047DCB;
  margin: 8px auto;
  font-size: 15px;
  &.disabled {
      opacity: 0.6;
      pointer-events: none;
    }
}

.top_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #000;
  font-size: 15px;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}

/**.清单 */
.popupList {
  max-height: 80vh;
  padding-top: 20px;
}

.popupWrapper {
  padding-left: 24px;
  padding-right: 24px;
}

.top_title3 {
  width: 100%;
  // height: 30px;
  // line-height: 30px;
  color: #000;
  font-size: 15px;
  padding-bottom: 24px;

}

// 弹窗 内容区域
.popup-goods-box {
  // margin-left: 24px;
  // margin-right: 24px;
  // height: 70vh;
}

.popup-goods-box_empty {
  height: 20vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  border-top: 1px solid #e5e5e5
}

.submitBar_left {
  display: flex;
  align-items: center;
}

// 购物车上的数字
.cartInfo {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 18px;
  height: 18px;
  background: #FF0000;
  color: #ffffff;
  border-radius: 50%;
}

/deep/.van-button--default {
  background-color: transparent;
  padding: 0px;
  border: none !important;
}
</style>
